<template>
  <el-card class="box-card">
    <el-form ref="form" :model="form" inline>
      <el-form-item prop="search">
        <el-input
          v-model="form.search"
          clearable
          style="width: 200px"
          prefix-icon="search"
          placeholder="输入名称"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="success"
          icon="search"
          size="small"
          @click="search(form)"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>

    <el-button
      type="primary"
      style="margin-bottom: 20px"
      icon="Edit"
      size="small"
      @click="createPermission()"
      >新增</el-button
    >

    <!--表单组件-->
    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%"
      row-key="id"
      :header-cell-style="{ background: '#fafafa', color: '#606266' }"
      highlight-current-row
    >
      <el-table-column
        prop="name"
        label="名称"
        min-width="100"
        show-overflow-tooltip
      />

         <el-table-column
            prop="sign"
            label="权限标识"
            min-width="100"
            show-overflow-tooltip
          />

           <el-table-column
                prop="path"
                label="路径"
                min-width="100"
                show-overflow-tooltip
              />
        <el-table-column label="是否为菜单" width="120">
          <template #default="{ row }">
            <el-tag v-if="row.menu">是</el-tag>
            <el-tag v-else type="warning">否</el-tag>
          </template>
        </el-table-column>
    

      <el-table-column fixed="right" align="center" label="操作" width="220">
        <template #default="scope">
          <el-button
            type="primary"
            icon="edit"
            size="small"
            @click="updatePermission(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="delete"
            size="small"
            @click="deletePermission(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <el-pagination
      background
      :current-page="currentPage"
      :page-sizes="pagesizeList"
      :page-size="pagesize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <cuForm
      :dialog-visible="cuDialogVisible"
      :cur-id="curId"
      :permissions="tableData" 
      @close="close"
      @search="search"
    />
  </el-card>
</template>
<script>
import cuForm from "./components/cuForm.vue";
import { deletePermission, getPermissions } from "@/api/user/permissions";

export default {
  name: "User-Permission",
  components: { cuForm },
  data() {
    return {
      currentPage: 1, // 当前页面
      pagesize: 10, // 默认每页的数据条数
      pagesizeList: [10, 20, 50, 100], // 当前分页数
      total: 0, // 总数据条数
      form: {
        page: 1,
        size: 10,
        search: "",
        ordering: "",
      },
      tableData: [],
      isAllSelect: false,
      multipleSelection: [],
      // cuForm数据
      cuDialogVisible: false,
      curId: null,
    };
  },
  created() {
    this.search();
  },
  methods: {
    // 获取列表/搜索功能
    search() {
      getPermissions(this.form).then((response) => {
        this.tableData = response.data.results;
        this.total = response.data.count;
        console.log("当前total数量:", this.total);
      });
    },
    // 重置
    resetForm() {
      this.$refs.form.resetFields();
      this.search();
    },
    // 删除
    deletePermission(row) {
      this.$confirm('此操作将删除"' + row.name + '" , 是否继续？', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deletePermission(row.id).then(() => {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    });
                    // 刷新table
                    this.search();
                });
            })
                .catch(() => {
                    // 空的回调函数，什么都不做
                    // 异常处理
                    console.error("取消删除操作");
                });
        },

    // cuForm子组件
    createPermission() {
      this.cuDialogVisible = true;

    },
    updatePermission (row) {
        this.curId = row.id;
        this.cuDialogVisible = true;
    },
    close() {
      this.cuDialogVisible = false;
      this.curId = null;
    },
    //页面大小发生变化时触发，赋值并重新获取列表
    handleSizeChange(pagesize) {
      this.pagesize = pagesize; // 重新设置分页显示
      this.form.size = pagesize; // 将最新值更新到表单里
      this.search();
    },
    //页数发生变化时触发，复制并重新获取列表
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.form.page = currentPage;
      this.search();
    },
  },
};
</script>
